﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>淡入淡出</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 5px;
			}
			
			.box {
				width: 425px;
				height: 105px;
				padding-top: 5px;
				border: 1px solid #ccc;
			}
			
			.red {
				background-color: red;
			}
			
			.green {
				background-color: green;
			}
			
			.yellow {
				background-color: yellow;
			}
			
			.orange {
				background-color: orange;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="red"></div>
			<div class="green"></div>
			<div class="yellow"></div>
			<div class="orange"></div>
		</div>
		<script src="../jquery-1.12.4.min.js" ></script>
		<script>
			$('.box').find('div').fadeTo(1000,0.5);
			$('.red').mouseover(
				function(){
					$('.red').fadeTo(500,1);
				}
			)
			$('.red').mouseleave(
				function(){
					$('.red').fadeTo(500,0.5);
				}
			)
			$('.green').mouseover(
				function(){
					$('.green').fadeTo(500,1);
				}
			)
			$('.green').mouseleave(
				function(){
					$('.green').fadeTo(500,0.5);
				}
			)
			$('.yellow').mouseover(
				function(){
					$('.yellow').fadeTo(500,1);
				}
			)
			$('.yellow').mouseleave(
				function(){
					$('.yellow').fadeTo(500,0.5);
				}
			)
			$('.orange').mouseover(
				function(){
					$('.orange').fadeTo(500,1);
				}
			)
			$('.orange').mouseleave(
				function(){
					$('.orange').fadeTo(500,0.5);
				}
			)
		</script>
	</body>

</html>